<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
  class Hello extends React.Component {
    constructor (props) {
      //初始化props
      super(props)
      //初始化state
      this.state = {
        name: 'jack',
        age: 18
      }
    }

    updateUser () {
      this.setState(
        {
          name: 'team',
          age: 19
        }
      )
    }

    render () {
      return <div>
        <h1>hello,world</h1>
        <h1>name: {this.state.name}</h1>
        <h1>age: {this.state.age}</h1>
        <button onClick={this.updateUser.bind(this)}>数据更新</button>
      </div>
    }
  }

  ReactDOM.render(<Hello/>, document.getElementById('app'))
</script>
</body>
</html>
